/*
Header
==========================================
Defines the styles of the shopware storeview header and its components.

It contains the viewport specific styles inside media queries.

The header sizes are defined by the unitize mixin.

More precise designations are commented inside the document.
*/

    // Basic header
.header-main {
    .unitize(padding-bottom, 10);
    background: #fff;
    border-bottom: 1px solid @brand-primary;

    // Hide the currency and language switcher
    .top-bar { display: none }

	// Logo
	.logo-main {
		.unitize-padding(10, 10);

		.logo--link {
			.unitize-height(35, 16);
			display: inline-block;
            max-width: 100%;
		}

		// Smaller logo for mobile viewports
		.logo--shop {
			.unitize-height(35, 16);
			width: 50%;
		}

		.logo--supportinfo { display: none; }
	}

    .header--navigation { position: relative; }
}

    // Small Checkout & Registration Header
.is--ctl-checkout.is--minimal-header,
.is--ctl-register.is--minimal-header.is--target-checkout {

    // Header Support Info
    .header-main {
        .logo-main { width: 100%; }
        .logo--shop { width: 50% }
        .logo--link { .unitize(margin-top, 10); }

        .logo--supportinfo { display: none; }
        border-bottom: 1px solid @brand-primary;

        .btn--back-top-shop {
            .unitize(margin-top, 10);
            width: 40%;
            float: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

    // Shop navigation
.shop--navigation {
    position: relative;

    .navigation--list {
        width: 100%;
        text-align: right;
    }

    .navigation--entry {
        .unitize(margin-right, 5);
        display: inline-block;

        // General button styling in shop navigation
        .btn {
            .unitize-height(40, 16);
            .unitize-width(40, 16);
            vertical-align: middle;
        }

        .cart--link { .unitize-padding(2, 10, 2, 6); }
        .account--link { .unitize-padding(2, 10, 2, 8); }

        .icon--basket,
        .icon--account {
            .unitize(font-size, 21);
            display: inline;
            position: relative;
            vertical-align: middle;
            top: 0;
            left: 0;
        }

        .icon--heart {
            .unitize(font-size, 18);
            vertical-align: middle;
        }

        .icon--search {
            .unitize(font-size, 22);
            vertical-align: middle;
        }
    }

    // Shop navigation quantity badges
    .cart--quantity,
    .notes--quantity {
        .unitize(-4, 16, top);
        .unitize(left, 23);
        position: absolute;
        margin: 0;
    }

    .entry--link {
        text-align: center;
        text-decoration: none;
    }

    .main-search--form,
    .account--display,
    .cart--display,
    .cart--amount,
    .search--display {
        display: none;
    }

    .entry--search {
        .is--active.btn {
            background: @btn-default-hover-bg;
            color: @btn-default-hover-text-color;
            border-color: @btn-default-hover-border-color;
        }
    }

	.entry--cart {
        .unitize(margin-right, 12);
        position: relative;
    }

    // Menu Button toggle OffCanvas
    .entry--menu-left {
        .tap-highlight-color();
        top: 0;
        left: 0;
        position: absolute;
        display: block;
        font-weight: @font-bold-weight;
        text-align: left;

        .btn {
            .unitize(padding-left, 48);
            .unitize(line-height, 35);
            .unitize(font-size, 17);
            .unitize-height(40, 16);
            color: @brand-secondary;
            width: auto;
            background: 0 none;
            border: 0 none;
        }

        .icon--menu { .unitize(font-size, 20); }
    }
}

    // Default ajax search form
.main-search--form {
    .unitize-padding(10, 10);
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: @zindex-header-search-form;

    .main-search--field {
        .unitize-padding(9, 38, 9, 9);
        .unitize-height(40, 16);
        background: #fff;
        vertical-align: middle;
        width: 100%;
        position: relative;
    }

    .main-search--button {
        .appearance(none);
        .unitize(top, 10);
        .unitize(bottom, 10);
        .unitize(right, 10);
        .unitize(font-size, 20);
        .unitize-padding(0, 10);
        line-height: 1;
        position: absolute;
        z-index: @zindex-header-search-button;
        border: 0 none;
        background: transparent;
        color: @text-color;
        outline: none;
    }

    .main-search--text {
        display: none
    }
}

    // Creating the arrow on active search field
.has--csstransforms .entry--search .entry--trigger {
    &.is--active::after {
        .rotate(-45deg);
        .unitize-width(15, 16);
        .unitize-height(15, 16);
        .unitize(margin-top, 8);
        .unitize(margin-left, 1);
        background: darken(@gray, 2%);
        content: '';
        display: block;
    }
}

.entry--search {
    &.is--active {
        .main-search--form {
            .unitize(top, 50);
            background: darken(@gray, 2%);
            left: 0;
            display: block;
            position: absolute;
        }
    }
}

.header-main.is--active-searchfield {
    .unitize(padding-bottom, 70);
}

    // Loading indicator for css animations supported browsers
.has--cssanimations {
    .form--ajax-loader {
        .unitize(top, 20);
        .unitize(right, 55);
        position: absolute;
        display: none;

        &::before {
            .unitize-width(16);
            .unitize-height(16);
            .border-radius(100%);
            .animation(keyframe--spin 1s linear infinite);
            border: 2px solid @border-color;
            border-top: 2px solid darken(@border-color, 50%);
            display: block;
            content: "";
        }
    }
}

    // Loading indicator for non css animations supported browsers
.has--no-cssanimations .form--ajax-loader {
    .unitize(top, 24);
    .unitize(right, 55);
    .unitize-width(16);
    .unitize-height(16);
    position: absolute;
    display: none;
    background-image: url('../../img/icons/loading-indicator.gif');
}

    // Search results modal
.main-search--results {
    .clearfix();
    .unitize(top, 110);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: left;
    z-index: @zindex-header-search-results;
    display: none;
}

.results--list {
	.unitize-padding(10, 10);
    .box-shadow(0 10px 25px -15px #000);
    border-top: 1px solid @border-color;
    border-bottom: 1px solid @border-color;
    background: #fff;
    -ms-touch-action: manipulation;

    &::after {
        .rotate(135deg);
        .unitize-width(12);
        .unitize-height(12);
        .unitize(-6, 16, top);
        content: '';
        display: block;
        position: absolute;
        background: #fff;
        left: 48%;
        border: 1px solid @border-color;
        border-top: 0 none;
        border-right: 0 none;
    }

    .list--entry,
    .entry--all-results {
		display: block;
    }

    .entry--all-results.is--active {
        font-weight: 600;

        .entry--all-results-number {
            font-weight: 600;
        }
    }

    .list--entry {
        .unitize(line-height, 30);
        border-bottom: 1px solid @border-color;

        &:last-child { border: 0 none; }
    }

    .entry--no-results {
        width: 100%;
        text-align: center;
        list-style: none;
        font-weight: normal;
    }

    .is--active,
	.list--entry:hover {
        color: @link-color;

        .entry--name,
		.entry--price { color: @link-color; }
    }

	.search-result--link {
        .unitize-padding(6, 0);
        .clearfix();
        display: block;
    }

    .entry--name,
    .entry--price,
    .entry--all-results-link,
    .entry--all-results-number {
        .unitize-height(30, 16);
        .unitize(line-height, 30);
        display: block;
    }

    .entry--media {
        .unitize-height(30, 16);
		width: 10%;
		min-width: 10%;
        position: relative;
        text-align: center;

        .media--image {
            display: inline-block;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }

	.entry--name {
		.unitize(padding-left, 10);
		width: 60%;
		color: @text-color;

        // CSS truncating
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
	}

    .entry--price,
    .entry--all-results-number {
        width: 30%;
        text-align: right;
        color: @text-color;
        white-space: nowrap;
    }

    .entry--all-results {
        .unitize-padding(6, 5);
        font-weight: normal;
    }

    .entry--all-results-link {
        width: 70%;
        padding: 0;

        .icon--arrow-right {
            .unitize(-1, 16, top);
            .unitize-margin(0, 8, 0, 0);
            position: relative;
        }
    }

    .entry--all-results-number {
        font-weight: normal;
        color: @link-color
    }
}

.off-canvas .mobile--switches {
    .navigation--entry {
        padding: 0;
        border: none;
        background: none;
    }
}

    // Phone Landscape styling for the global shop header
@media screen and (min-width: @phoneLandscapeViewportWidth) {

    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {
        .header-main .btn--back-top-shop {
            width: auto;
        }
    }

    .entry--search {
        display: inline-block;
        position: absolute;
        left: 26%;
        width: 40%;

        // Remove the mobile search position in all other viewports
        &.is--active {
            .main-search--form {
                top: 0;
                display: inline-block;
            }
        }

        // Don't display toggle search bar icon
        .entry--trigger { display: none; }

        .main-search--form {
            .box-shadow(0 0 0 transparent);
            border-bottom: 0 none;
            padding: 0;
            display: inline-block;
            position: relative;

            // Reset the searchfield background
            .main-search--field {
                background: @input-bg;

                &:focus { background: #fff; }
            }

            // Icon position from here to @desktopViewportWidth
            .main-search--button {
                .unitize(top, 0);
                .unitize(bottom, 0);
                .unitize(right, 0);
                .unitize-padding(0, 10);
            }
        }
    }

    // Search results modal
    .main-search--results {
        .clearfix();
        .unitize(top, 50);
        .unitize-width(450);
        .unitize(-110, 16, margin-left);
    }

    .results--list {
        .border-radius();
        border: 1px solid @border-color;
        background: #fff;
    }

    // Remove the active searchfield padding
    .header-main {
        &.is--active-searchfield {
            .unitize(padding-bottom, 10);
        }
    }

    .has--cssanimations .form--ajax-loader {
        .unitize(top, 10);
        .unitize(right, 45);
        position: absolute;
    }

    .has--no-cssanimations .form--ajax-loader {
        .unitize(top, 14);
        .unitize(right, 45);
        position: absolute;
    }
}

    // Tablet styling for the global shop header
@media screen and (min-width: @tabletViewportWidth) {

    .header-main.is--active-searchfield  {
        padding-bottom: 0;
    }

    .header-main {
        padding-bottom: 0;
        border-bottom: 0 none;

        .container { .clearfix() }

        .top-bar {
            .unitize-padding(4, 0, 4, 0, 16);
            display: block;
        }

        .top-bar--navigation {
            width: auto;
            float: right;

            .navigation--entry {
                .unitize-padding(0, 15);
                .unitize(line-height, 25);
                float: left;
                display: block;

                li { line-height: normal; }
            }

            .navigation--entry,
            .navigation--link {
                color: @text-color;
                cursor: pointer;

                &:hover { color: @brand-primary; }
            }

            .field--select,
            .navigation--entry,
            .js--fancy-select,
            .js--fancy-select-text,
            .js--fancy-select-trigger {
                .unitize-height(25, 16);
            }

            // Normalize fancy select appearance
            .field--select {
                position: relative;
                margin: 0;
                padding: 0;
            }

            .js--fancy-select {
                .reset-border-radius();
                background: none;
                border: 0 none;
                width: auto;

                select { border: 0 none; }
            }

            .js--fancy-select-text {
                .unitize-padding(0, 18, 0, 0);
                .unitize(line-height, 25);
                border: 0 none;
            }

            .js--fancy-select-trigger {
                .unitize(line-height, 27);
                width: auto;
                border: 0 none;
            }

            // Language switcher
            .top-bar--language {
                .js--fancy-select-text {
                    .unitize-width(32, 16);
                    text-indent: -9999px;
                    text-align: left;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .language--flag {
                    .unitize(-6, 16, margin-top);
                    position: absolute;
                    z-index: @zindex-header-language-flag;
                    top: 50%;
                    left: 0;
                }
            }

            // Service list
            .entry--service {
                position: relative;

                &:after,
                &::after {
                    .unitize(-3, 16, top);
                    .unitize(margin-left, 5);
                    content: "\e612";
                    font-family: 'shopware';
                    position: relative;
                }

                &.js--is--dropdown-active {
                    color: @brand-primary;
                }
            }

            .service--list {
                .unitize-min-width(150);
                .unitize-padding(5, 0);
                .unitize(top, 32);
                .unitize(right, 12);
                text-align: left;
                position: absolute;
                display: none;
                list-style: none;
                background: #fff;
                z-index: @zindex-header-service-list;
                border: 1px solid @border-color;

                &::after {
                    .rotate(135deg);
                    .unitize-width(8);
                    .unitize-height(8);
                    .unitize(-5, 16, top);
                    .unitize(right, 18);
                    content: '';
                    display: block;
                    position: absolute;
                    background: #fff;
                    border-color: @border-color;
                    border-width: 0 0 1px 1px;
                    border-style: solid;
                }

                .service--link {
                    .unitize-padding(5, 10);
                    display: block;
                    color: @text-color;
                }

                .service--link:hover {
                    color: @brand-primary;
                }
            }

            .js--is--dropdown-active .service--list {
                display: block;
            }
        }

        .header--navigation {
            .unitize-padding(10, 0);
        }

        .logo-main {
            .unitize-padding(0, 0, 0, 10);
            width: 35%;

			.logo--link { .unitize-height(50, 16); }

			// Larger logo for tablet & desktop viewports
			.logo--shop {
				.unitize-height(50, 16);
				width: 82%
			}
        }
    }

    // Header Support Info
    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {
        .header-main {
            .box-shadow(0 1px 2px 0 @border-color);

            .logo-main {
                .unitize(padding-right, 10);
                width: 100%;
            }

            .logo--shop { width: 35% }

            .logo--link {
                margin-top: 0;
                width: 80%;
            }

            .logo--supportinfo {
                .unitize-padding(5, 0);
                display: block;
                width: 35%;
            }
        }
    }

    .logo-main,
    .shop--navigation {
        float: left;
    }

    .shop--navigation {
        width: 65%;

        .navigation--list {
            background-image: none;
            text-align: right;
        }

        .navigation--entry {
            .border-radius();
            border: 0 none;
            width: auto;
            float: none;
            display: inline-block;
        }

        .entry--cart {
            .entry--link {
                padding: 0;
                display: inline-block;
            }
        }

        .entry--link { font-weight: normal; }
        .entry--menu-left { display: none; }

        .cart--quantity,
        .search--display,
        .entry--account { display: inline-block; }

        // Search entry
        .entry--search {
            .unitize(font-size, 14);
            position: absolute;
            left: 3%;
            margin-right: 10%;
            background: #fff;
            padding: 0;
            border: 0 none;
            width: 50%;

            .entry--trigger { display: none }
        }

        // Search form
        .main-search--form {
            .box-shadow(0 0 0 transparent);
            display: block;
            padding: 0;
            border: 0 none;
        }
    }

    .main-search--form { left: auto; }

    .main-search--results {
        .clearfix();
        .unitize-width(450);
        .unitize(-225, 16, margin-left);
        .unitize(top, 55);
        left: 50%;
    }
}

    // Tablet Landscape styling for the global shop header
@media screen and (min-width: @tabletLandscapeViewportWidth) {

    .header-main {
        .logo-main { width: 30%; }
        .shop--navigation { width: 70%; }
    }

    .shop--navigation {
        .entry--search {
            width: 40%;
            margin-right: 8%;
        }
    }

    // Small Checkout & Registration Header
    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {

        .header-main {
            .box-shadow(0 1px 2px 0 @border-color);

            .logo--shop { width: 30% }
            .logo--supportinfo { width: 35%; }

            .btn--back-top-shop {
                display: inline-block;
                float: right;
            }
        }
    }

    .navigation--list {

        // Reset the button width
        .navigation--entry .btn { width: auto; }

        // Custom styling cart button
        .entry--cart {
            .cart--link {
                .unitize(padding-left, 50);
                .cart--quantity { display: inline-block; }
                .cart--amount {
                    display: inline-block;
                    color: @brand-primary;
                    font-weight: @font-bold-weight;
                }
            }

            .icon--basket {
                .unitize(left, 8);
                display: block;
                position: absolute;
                top: 50%;
            }
        }

        .entry--account {
            .account--link { .unitize(padding-left, 36); }

            .icon--account {
                .unitize(left, 8);
                display: block;
                position: absolute;
                top: 50%;
            }
        }

        .account--display { display: inline-block; }
    }
}

    // Desktop styling for the global shop header
@media screen and (min-width: @desktopViewportWidth) {

    .header-main {
        .top-bar { .unitize(margin-bottom, 2); }
        .logo--shop { width: 75% }
    }

    // Small Checkout & Registration Header
    .is--ctl-checkout.is--minimal-header,
    .is--ctl-register.is--minimal-header.is--target-checkout {

        .header-main {
            .box-shadow(0 1px 2px 0 @border-color);

            .logo-main { padding-right: 0; }
            .logo--shop { width: 30% }
            .logo--supportinfo { width: 35%; }

            .btn--back-top-shop {
                display: inline-block;
                float: right;
            }
        }
    }

    // General shop navigation
    .shop--navigation {
        width: 75%;

        .navigation--link {
            .unitize-padding(8, 16, 16);
        }

        .entry--link {
            .unitize(font-size, 14);
        }

        .entry--trigger {
            .unitize(margin-right, 14);
        }

        // Search entry
        .entry--search { width: 40%; }

        // Reset the right margin for desktop
        .entry--cart { margin-right: 0; }
    }

    // Topbar navigation
    .header-main .top-bar--navigation {
        .service--list {
            right:  0;
        }

        .navigation--entry:last-child {
            padding-right: 0;
        }
    }

    .cart--display {
        .unitize-margin(0, 25, 0, 5, 16);
        font-weight: bold;
        color: @text-color;
    }
}
